<template>
<uni-shadow-root class="partials-newsList-newsListSlide-newsListSlide"><template name="newsListSlide">
<block v-if="relateBean.length!=0">
  <scroll-view class="recommend_scroll_x_box" scroll-x="true">
    <block v-for="(item,index) in (relateBean)" :key="item.index">
      <view class="recommend_hot_box" :style="'background-color:'+(color)+';'" @click="tolinkUrl" :data-id="item.id">
        <view class="CouponsImg">   <image mode="aspectFill" :src="item.imagePath"></image> </view>
        <view class="chooseName1">{{item.title}}</view>
        <view class="productListSlidePrice"></view>
      </view>
    </block> 
  </scroll-view>
</block>
<block v-if="relateBean.length==0">
    <view class="noproduct">
      <image mode="widthFix" src="https://image1.sansancloud.com/xianhua/2019_12/16/15/54/55_950.jpg?x-oss-process=style/preview_120"></image>
      <text>没有相关新闻</text>
    </view>
</block>
</template></uni-shadow-root>
</template>

<script>

global['__wxRoute'] = 'partials/newsList/newsListSlide/newsListSlide'

Component({})

export default global['__wxComponents']['partials/newsList/newsListSlide/newsListSlide']
</script>
<style platform="mp-weixin">
.recommend_scroll_x_box {
  height: 300rpx;
  white-space: nowrap;
  display: flex;
  margin-top: 10rpx;
}

.recommend_hot_box {
  width: 200rpx;
  height: 300rpx;
  margin-left: 24rpx;
  display: inline-block;
  text-align: center;
}
.CouponsImg {
  width: 200rpx;
  height: 200rpx;
  overflow: hidden;
  border-radius: 0.2em;
}
.CouponsImg image{
  width: 100%;
  height: 100%;
}
.chooseName1{
  height: 65rpx;
  text-align: left;
  font-size: 25rpx;
  margin-top: 10rpx;
  white-space:normal;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
  margin-bottom: 10rpx
}
.productListSlidePrice{
    width: 100%;
    height: 0rpx;
    text-align: left;
    align-items: center;
    justify-content: space-between;
    display: flex;
}
.productListSlidePrice{
   font-size: 30rpx;
   color: red;
}
</style>